<script setup lang="ts">
import RouterTransition from '@/components/RouterTransition.vue'
import SubMenu from './components/SubMenu.vue'
import HeadAvatar from './components/HeadAvatar.vue'
import HeadTabs from './components/HeadTabs.vue'
import { Bell, Expand, Fold, Search, Setting } from '@/icons'
import logo from '@/assets/images/vue.svg'
import avatar from '@/assets/images/undraw_male_avatar_g98d.svg'
import { useMenuStore, useTabStore, useDialogStore } from '@/stores'
import { defaultLayout } from '@/services/layout'

const menuStore = useMenuStore()
const tabStore = useTabStore()
const dialogStore = useDialogStore()

const { kaIncludes, onTabChange, onTabRemove } = defaultLayout()
</script>
<template>
  <el-container class="main-container">
    <el-aside width="auto">
      <div class="logo">
        <el-image class="logo-img" :src="logo" fit="contain" />
        <span class="logo-text">Skyline</span>
      </div>
      <el-scrollbar>
        <el-menu
          :defaultActive="menuStore.menuActive"
          :collapse="menuStore.collapse"
          :unique-opened="true"
          :collapse-transition="true"
        >
          <SubMenu :menus="menuStore.menus" />
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="6">
            <el-icon class="icon" @click="menuStore.collapse = !menuStore.collapse">
              <Expand v-if="menuStore.collapse" />
              <Fold v-else />
            </el-icon>
            <el-icon class="icon ml-2">
              <Search />
            </el-icon>
          </el-col>
          <el-col class="head-right" :span="18">
            <el-badge class="mr-4" :value="4">
              <el-icon><Bell /></el-icon>
            </el-badge>
            <el-badge class="mr-4">
              <el-icon class="rotate"><Setting /></el-icon>
            </el-badge>
            <HeadAvatar :avatar="avatar" />
          </el-col>
        </el-row>
        <HeadTabs
          :tabs="tabStore.tabs"
          v-model="tabStore.tabActive"
          @tab-change="onTabChange"
          @tab-remove="onTabRemove"
        />
      </el-header>
      <el-main>
        <RouterView v-slot="{ Component, route }">
          <!-- <Transition
            appear
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut"
            mode="out-in"
          > -->
          <RouterTransition
            appear
            :enter-active-class="route?.meta?.enterActiveClass"
            :leave-active-class="route?.meta?.leaveActiveClass"
            mode="out-in"
          >
            <KeepAlive :include="kaIncludes">
              <component :is="Component" :key="route.fullPath" />
            </KeepAlive>
          </RouterTransition>
        </RouterView>
      </el-main>
      <el-footer>
        <el-text> 2023-2024 &copy; Vue3 Skyline Admin By </el-text>
        <el-link href="https://space.bilibili.com/402814364" target="_blank">
          &nbsp; B站-编程段子
        </el-link>
      </el-footer>
    </el-container>
    <el-dialog
      v-model="dialogStore.visible"
      :title="dialogStore.title"
      width="400"
      align-center
      append-to-body
    >
      <span>{{ dialogStore.content }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-for="(a, i) of dialogStore.actions"
            :key="a.label"
            :type="a.type"
            @click="dialogStore.action(i)"
          >
            {{ a.label }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<style lang="scss" scoped>
@import url('./DefaultLayout.scss');

// Transition By Private
.animate__animated {
  --animate-duration: 0.2s;
}

.rotate {
  animation: rotate 10.8s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0) translateZ(0);
  }
  to {
    transform: rotate(360deg) translateZ(0);
  }
}
</style>
